<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>iView Editor</title>
    <link rel="stylesheet" href="https://file.iviewui.com/3.0.0/styles/iview.css">
    <link rel="stylesheet" href="dist/iview-editor.css">
    <style>
        #app{
            padding: 100px;
            height: 2000px;
        }
        .app{
            width: 600px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app">
        <i-editor paste v-model="content" affix :highlight="highlight" :config="config" :before-upload="beforeUpload" :img-url="imgUrl" :autosize="{minRows: 6}"></i-editor>
    </div>
</div>
    <script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://file.iviewui.com/3.0.0/iview.min.js"></script>
    <script type="text/javascript" src="/dist/iview-editor.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                content: 'hello world',
                config: {
                    uploadForm: {
                        token: '',
                        key: ''
                    },
                    action: 'https://up.qbox.me',
                    maxSize: 5120
                }
            },
            methods: {
                beforeUpload (file) {
                    // 如果是使用七牛等上传服务，在这里获取 token 后，返回 Promise 来向七牛上传
                    const p = new Promise((resolve, reject) => {
                        setTimeout(() => {
                            this.config.uploadForm = {
                                token: '',  // 从自己服务获取的 token，用于七牛上传
                                key: ''  // 从自己服务获取的 key，用于七牛上传
                            };
                            resolve();
                        }, 1000);
                    });
                    return p;
                },
                imgUrl (res) {
                    // 上传成功后，如果是七牛等服务，需要自己构造完整的图片 url
                    return 'https://dev-file.iviewui.com/' + res.key + '/large';
                },
                highlight (code) {
                    console.log(code);
                }
            }
        });
    </script>
</body>
</html>
